<template>
  <div class="app-container">
    <el-dialog title="标签打印" :visible.sync="dialogVisible" width="30%" append-to-body>
      <div class="unitDiv" id="printDiv">
        <div class="titleDiv">汽车床垫</div>
        <div class="contDiv">
          <div class="textDiv" style="flex: 1">
            <div class="text">单号：{{form.orderNo}}</div>
            <div class="text">业务员：{{form.customerName||'-'}}</div>
            <div class="text">数量：{{form.quantity||'-'}}</div>
            <div class="text">规格：{{form.skuDesc}}</div>
            <div class="text remarkDiv">备注：{{form.remark||'-'}}</div>
          </div>
          <div style="width: 80px;margin: auto;">
            <el-image
              :src="codeImg"
              fit="contain"
            >
            </el-image>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" v-print="'#printDiv'">打 印</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getProduceOrder,getOrderCode} from "../../../api/imsMng";

export default {
  data() {
    return {
      loading: false,
      dialogVisible: false,
      codeImg:'',
      form: {}
    }
  },
  methods: {
    show(id) {
      this.dialogVisible = true
      this.form = {}
      this.resetForm('form')
      this.form.id =id
      this.load(id)
    },
    load(id){
      getOrderCode(id).then(res=>{
        this.codeImg=res.data.imageUrl
      })
      getProduceOrder(id).then(res=>{
        this.form=res.data
        let skuDesc=JSON.parse(this.form.skuDesc)
        this.form.color=skuDesc.matColor
        this.form.width=skuDesc.width
        this.form.length=skuDesc.length
      })
    }
  }
}
</script>
<style scoped>
.unitDiv{
  margin: auto;
  width: 150px;
  height: 220px;
  border: 1px dashed;
  border-radius: 10px;
  padding: 10px;
  font-size: 9px;
}
.unitDiv:hover{
  cursor: pointer;
  transform: scale(1.5);
}
.titleDiv{
  text-align: center;
  font-weight: bold;
  font-size: 13px;
}
.text{
  line-height: 18px;
}
.remarkDiv{
  width: 130px;
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号来表示溢出 */
}
</style>
